<template>

    <!-- <el-date-picker v-model="selectDate" type="date" placeholder="Pick a day" @change="handleSelectDate" />
    <el-button icon="ArrowLeft" circle @click="handleLeftBtn" />
    <el-button icon="ArrowRight" circle @click="handleRightBtn" /> -->   
    <div style="display: flex;height:100%;">
        <div style="background-color: red;min-width:230px;">sadflksdajfl </div>
        <div  id="mycalendar" style="width: 100%;height: 100%">
    </div>
    </div>  
 
    <div id="popup" style="position:  baseline; left:'500px',top:'500px'; z-index:9999; background-color: red">
        <p>这是一个弹窗</p>
    </div>
     
</template>
<script>
import Calendar from '@toast-ui/calendar';
// import '@toast-ui/calendar/dist/toastui-calendar.min.css';
import { setStore, getStore } from '@/utils/store';
import "./toastui-calendar.min.css"
// import 'tui-date-picker/dist/tui-date-picker.min.css';
// import 'tui-time-picker/dist/tui-time-picker.min.css';
import dayjs from 'dayjs'
import { v4 as uuidv4 } from 'uuid'
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            useCreatePopup: false,
            useDetailPopup: false,
            calendar: undefined,
            selectDate: ''
        }
    }, 
    methods: {
        init() {
            const that = this;
            this.calendar = new Calendar('#mycalendar', { 
                defaultView: 'week',
                scheduleView: ['time'],
                useFormPopup: this.useCreatePopup,
                useDetailPopup: this.useDetailPopup,
                usageStatistics: false,  
                calendars: [
                        {
                        name: 'mycalendar',
                        bgColor: '#9e5fff',
                        dragBackground: false,
                        dragBorder: false,
                        resizable: false, // 禁用事件拉伸
                        draggable: false, // 禁用事件拖拽
                        },
                    ],
                template: {
                // 自定义事件内容渲染                
                    timegridDisplayPrimaryTime({ time }) { //左边时间显示内容
                        return `${dayjs(time).format('HH:mm')}`
                    },
                    milestone: function (model) {
                        // return '<span style="background-color: ' + model.bgColor + '">' + model.title + '</span>';
                        return 'fsadfsdafsdaf';
                    },
                   
                },
                week: {
                    // taskView: false
                    dayNames: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                    startDayOfWeek: 1,
                    narrowWeekend: false,
                    workweek: false,
                    showNowIndicator: true,
                    showTimezoneCollapseButton: false,
                    timezonesCollapsed: false,
                    hourStart: 0,
                    hourEnd: 24,
                    eventView: ['time'],
                    taskView: false,
                    collapseDuplicateEvents: false,
                }
            });
            this.calendar.createEvents([
                {
                    id: uuidv4(),
                    title: 'Weekly Meeting',
                    start: new Date(Date.now()),
                    end: new Date(Date.now() + 30 * 60 * 1000),
                    backgroundColor: 'red',
                    dragBackgroundColor: 'red',
                    borderColor: 'red',
                    draggable: false, // 确保事件特定数据也设置为不可拖拽
                    resizable: false, // 确保事件特定数据也设置为不可拉伸
                },
            ]);
            // 创建
            this.calendar.on("beforeCreateEvent", (e) => {
                console.log("创建", e)
                this.calendar.createEvents([
                    {
                        id: uuidv4(),
                        calendarId: 'cal1',
                        title: e.title,
                        start: e.start.d.d,
                        end: e.end.d.d,
                        isAllday: e.isAllday,
                        location: e.location,
                        state: e.state,
                        color: '#fff',
                        backgroundColor: 'red',
                        dragBackgroundColor: 'red',
                        borderColor: 'red',
                        draggable: false, // 确保事件特定数据也设置为不可拖拽
                        resizable: false, // 确保事件特定数据也设置为不可拉伸
                        customStyle: {
                            fontStyle: 'italic',
                            fontSize: '15px',
                        },
                    }, // EventObject
                ])
            })
            //修改
            this.calendar.on('beforeUpdateEvent', (e) => {
                console.log("修改", e)
                const targetEvent = e.event;
                const changes = { ...e.changes };
                this.calendar.updateEvent(targetEvent.id, targetEvent.calendarId, changes);
            });
            //删除
            this.calendar.on('beforeDeleteEvent', (e) => {
                console.log("删除", e)
                this.calendar.deleteEvent(e.id, e.calendarId);
            });

            this.calendar.on('clickEvent', (e) => {
                const schedule = e.schedule;
                const popup = document.getElementById('popup');
                // popup.style.display = 'flex'; // 显示弹窗
                let offset = 230;
                if( that.$store.getters.isCollapse){
                    offset = 60;    
                }

                 
                if( e.nativeEvent.srcElement.className ==="toastui-calendar-event-time-content"){
                    popup.style.left = e.nativeEvent.srcElement.getClientRects()[0].right-offset + 5 + 'px'; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
                    popup.style.top = e.nativeEvent.srcElement.getClientRects()[0].top + 5 + 'px';
                    popup.style.position = "absolute"; //必须指定这个属性，否则div3层无法跟着鼠标动
                }else{
                    popup.style.left = e.nativeEvent.srcElement.parentElement.parentElement.getClientRects()[0].right-offset + 5 + 'px'; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
                    popup.style.top = e.nativeEvent.srcElement.parentElement.parentElement.getClientRects()[0].top + 5 + 'px';
                    popup.style.position = "absolute"; //必须指定这个属性，否则div3层无法跟着鼠标动
                }

               

            });



        },
        handleLeftBtn() {
            this.calendar.prev()
        },
        handleRightBtn() {
            this.calendar.next()
        },
        handleSelectDate() {
            this.calendar.setDate(this.selectDate)
        }
    },
    mounted() {
        this.init()
    }
}
</script>
<style lang="scss" scoped> 
.sdfasd {     
    position: relative;
    height: 100%
}
</style>